<template>
  <div :class="[isDark ? 'ca-home dark': 'ca-home']">
    <el-container>
      <el-main>
        <div class="ca-home__paragraph--bg">
          <el-header>
            <div class="ca-header__logo">logo</div>
            <el-button :icon="isDark ? MoonNight : Sunny"
                       :type="isDark ? 'info': ''"
                       circle
                       @click="themeStore.changeTheme"/>

            <div class="ca-header__navigation">
              <router-link class="ca-login-btn" to="/login">登录</router-link>
            </div>
          </el-header>
          <div class="ca-first-paragraph">
            <div class="ca-first-paragraph__halo ca-first-paragraph__halo--purple">
              <img :src="purpleHalo">
            </div>
            <div class="ca-first-paragraph__halo ca-first-paragraph__halo--blue">
              <img :src="blueHalo">
            </div>
            <div class="ca-first-paragraph__text">
              <div class="ca-first-paragraph__text--main">
                <p>这是一点描述信息</p>
                <p style="color: rgb(25, 182, 246)">描述信息</p>
                <p>这也是描述信息</p>
              </div>
              <div class="ca-first-paragraph__text--secondary">好像应该在这个地方说点什么</div>
              <div class="ca-first-paragraph__text--button">
                <el-button color="#626aef" size="large" :dark="isDark">快速开始</el-button>
                <el-button color="#626aef" size="large" :dark="isDark" plain>联系我们</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="ca-home__paragraph">
          <div class="ca-second-paragraph">
            <div class="ca-second-paragraph__halo ca-second-paragraph__halo--right"></div>
            <div class="ca-second-paragraph__halo ca-second-paragraph__halo--left"></div>
            <div class="ca-second-paragraph__title">
              Our <span style="color: #ac7ff4;font-weight: bold">examples</span>
            </div>
            <div class="ca-second-paragraph__carousel">
              <el-carousel :interval="4000"
                           type="card">
                <el-carousel-item v-for="item in 6" :key="item">
                  <h3>{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="ca-second-paragraph__btn">
              <el-button color="#31adf6" size="large" :dark="isDark">
                <span style="color: white">See more examples</span></el-button>
            </div>
          </div>
        </div>
        <div class="ca-home__paragraph--bg">
          <div class="ca-third-paragraph">
            <div class="ca-third-paragraph__halo ca-third-paragraph__halo--purple">
              <img :src="purpleHalo">
            </div>
            <div class="ca-third-paragraph__halo ca-third-paragraph__halo--blue">
              <img :src="blueHalo">
            </div>
            <div class="ca-third-paragraph__title">
              这是一个很长很长的标题
            </div>
            <div class="ca-third-paragraph__container">
              <div class="ca-third-paragraph__menu">
                <div v-for='(item,index) in menuList'
                     @click="()=>changeActiveMenu(index)"
                     :class="[index===activeMenu? 'ca-third-paragraph__menu--item ca-third-paragraph__menu--active': 'ca-third-paragraph__menu--item']">
                  {{ item }}
                </div>
              </div>
              <div class="ca-third-paragraph__detail">
                <img class="ca-third-paragraph__detail--img" width="500" height="300" :src="details.picture" alt="">
                <div class="ca-third-paragraph__detail--description">{{ details.description }}</div>
                <el-button class="ca-third-paragraph__detail--btn" color="#626aef" size="large" :dark="isDark">Learn
                  More
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <div class="ca-footer-wrapper">
          <div class="ca-footer-main">
            <div class="ca-footer-main__logo">logo</div>
            <div class="ca-footer-main__docs">
              <div class="ca-footer-main__docs--group">
                <a>Docs</a>
                <a>Docs</a>
                <a>Docs</a>
                <a>Docs</a>
              </div>
              <div class="ca-footer-main__docs--group">
                <a>Docs</a>
                <a>Docs</a>
                <a>Docs</a>
                <a>Docs</a>
              </div>
              <div class="ca-footer-main__docs--group">
                <a>Docs</a>
                <a>Docs</a>
                <a>Docs</a>
                <a>Docs</a>
              </div>
            </div>
          </div>
          <el-divider/>
          <a href="https://beian.miit.gov.cn/#/Integrated/index">备案号：辽ICP备2021008169号</a>
          <a style="margin-left: 16px" href="https://beian.mps.gov.cn/#/query/webSearch">
            <img width="16" :src="policeBadge" alt="">
            辽公网安备21021102001323号</a>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {MoonNight, Sunny} from "@element-plus/icons-vue";
import {storeToRefs} from 'pinia';
import {useThemeStore} from '@/store';
import {onBeforeRouteLeave} from "vue-router";

type Details = {
  description?: string,
  picture?: string,
  link?: string
}
const purpleHalo = new URL('@/assets/images/purpleHalo.svg', import.meta.url).href;
const blueHalo = new URL('@/assets/images/blueHalo.svg', import.meta.url).href;
const policeBadge = new URL('@/assets/images/policeBadge.png', import.meta.url).href;
const detail_pic_mock = new URL('@/mock/assets/detail.jpg', import.meta.url).href;
const menuList = ref<string[]>(['这是菜单一,名字再长点', '我是菜单二，就这', '我是老三最短', '菜单四，巴拉巴拉巴拉']);
const details = ref<Details>({
  description: '这是一段描述文字,很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的描述文字',
  picture: detail_pic_mock,
  link: ''
});
const activeMenu = ref<number>(0);
const themeStore = useThemeStore();
const {isDark} = storeToRefs(themeStore);

const changeActiveMenu = (index: number) => {
  activeMenu.value = index;
}

onBeforeRouteLeave((to, from) => {
  console.log('beforeRouteLeave:', to, from);
  // return to.name !== 'login';
});

</script>

<style scoped lang="scss">
@include block(header) {
  padding: 0 20px;
  background: transparent;
  backdrop-filter: blur(23px) saturate(1);
  position: fixed;
  z-index: 100;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @include elem(logo) {

  }
  @include elem(navigation) {
    .ca-login-btn {
      text-decoration: none;
      color: black;
    }
  }
}

@include block(main) {
  padding: 0;
  overflow: hidden;
}

@include block(first-paragraph) {
  padding-top: 60px;
  height: 100%;
  width: 1500px;
  margin: auto;
  position: relative;
  @include elem(halo) {
    display: none;
    position: absolute;
    @include mod(purple) {
      z-index: 2;
      right: -10px;
      top: 30px;
    }
    @include mod(blue) {
      z-index: 1;
      left: 10px;
      bottom: -90px;
    }
  }
  @include elem(text) {
    position: relative;
    z-index: 3;
    top: 140px;
    margin: auto;
    width: 100%;
    height: 100%;
    text-align: center;
    @include mod(main) {
      font-size: 70px;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    @include mod(secondary) {
      margin-top: 40px;
      font-size: 24px;
    }
    @include mod(button) {
      margin-top: 80px;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

@include block(second-paragraph) {
  position: relative;
  height: 100%;
  @include elem(halo) {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    width: 300px;
    height: 100%;
    @include mod(right) {
      right: 0;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #d9d5f1 100%);
    }
    @include mod(left) {
      left: 0;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #d9d5f1 100%);
    }
  }
  @include elem(title) {
    text-align: center;
    height: 300px;
    line-height: 300px;
    font-size: 60px;
  }
  @include elem(carousel) {
    width: 1500px;
    margin: auto;
  }
  @include elem(btn) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 120px;
  }
}

@include block(carousel) {
  @include elem(item) {
    h3 {
      color: #475669;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
      text-align: center;
    }
    &:nth-child(2n) {
      background-color: #99a9bf;
    }
    &:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}

@include block(third-paragraph) {
  position: relative;
  padding-top: 60px;
  @include elem(halo) {
    display: none;
    position: absolute;
    pointer-events: none;
    @include mod(purple) {
      z-index: 2;
      right: 200px;
      bottom: -400px;
      opacity: 0.5;
    }
    @include mod(blue) {
      z-index: 1;
      right: -500px;
      bottom: -100px;
    }
  }
  @include elem(title) {
    width: 100%;
    height: 200px;
    line-height: 200px;
    font-weight: bold;
    font-size: 64px;
    color: transparent;
    background-clip: text;
    background-image: url('@/assets/images/rainbow_gradient_color.png');
    background-position: center;
    text-align: center
  }
  @include elem(container) {
    width: 1000px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @include elem(menu) {
    flex: 1 1;
    @include mod(item) {
      height: 100px;
      line-height: 100px;
      cursor: pointer;
      font-size: 40px;
      font-weight: bold;
      color: #9dacde;
      &:hover {
        color: #AC7EF4;
      }
    }
    @include mod(active) {
      color: #18b6f6;
    }
  }
  @include elem(detail) {
    flex: 1 1;
    @include mod(img) {
      border-radius: 15px;
      border: 10px solid #5449a9;
      margin-bottom: 30px;
    }
    @include mod(description) {
      margin-bottom: 30px;
    }
    @include mod(btn) {

    }
  }
}

@include block(footer) {
  padding: 0;
  height: fit-content;
}

@include block(footer-wrapper) {
  width: 1000px;
  margin: auto;
  padding: 80px 0 40px 0;
}

@include block(footer-main) {
  width: 100%;
  display: flex;
  @include elem(logo) {
    flex: 1 1;
    font-size: 48px;
    font-weight: bold;
  }
  @include elem(docs) {
    flex: 1 1;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    @include mod(group) {
      display: flex;
      flex-direction: column;
      gap: 6px;
      a:hover {
        color: #18b6f6;
        cursor: pointer;
      }
    }
  }
}

@include block(home) {
  @include elem(paragraph) {
    height: 900px;
    width: 100%;
    transition: background-color 0.5s ease;
    @include mod(bg) {
      width: 100%;
      height: 900px;
      background-image: url("@/assets/images/home-bg.jpg");
      background-position: center;
      transition: background-color 0.5s ease;
    }
  }
}

//暗色主题
.ca-home.dark {
  color: white;
  @include block(header) {
    background: transparent;
    @include elem(navigation) {
      .ca-login-btn {
        color: white;
      }
    }
  }
  @include block(first-paragraph) {
    @include elem(halo) {
      display: block;
    }
  }
  @include block(second-paragraph) {
    @include elem(halo) {
      width: 500px;
      @include mod(right) {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #160b52 100%);
      }
      @include mod(left) {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #160b52 100%);
      }
    }
  }
  @include block(third-paragraph) {
    @include elem(halo) {
      display: block;
    }
    @include elem(title) {
      color: white;
    }
    @include elem(menu) {
      @include mod(item) {
        color: #e6e6e629;
        &:hover {
          color: white;
        }
      }
      @include mod(active) {
        color: #18b6f6;
      }
    }
  }
  @include block(footer) {
    background: black;
  }
  @include block(home) {
    @include elem(paragraph) {
      background: black;
      @include mod(bg) {
        background: rgba(21, 25, 52, 1);
      }
    }
  }
}
</style>